<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>离职离岗申请 - 护工助手</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/icons.css">
    <style>
        .page-header {
            background-color: #2B7DE1;
            color: white;
            padding: 12px 16px;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .back-button {
            position: absolute;
            left: 16px;
            font-size: 20px;
            color: white;
        }
        
        .page-title {
            font-size: 17px;
            font-weight: 500;
        }
        
        .page-content {
            padding-top: 60px;
            padding-bottom: 80px;
        }
        
        .status-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 16px;
            background-color: #2B7DE1;
        }
        
        .time {
            font-size: 14px;
            color: white;
        }
        
        .status-icons {
            display: flex;
            gap: 5px;
            color: white;
        }
        
        .icon {
            font-size: 14px;
        }

        .tab-container {
            display: flex;
            margin: 16px;
            border: 1px solid #2B7DE1;
            border-radius: 6px;
            overflow: hidden;
        }

        .tab-button {
            flex: 1;
            padding: 12px;
            text-align: center;
            background-color: white;
            font-size: 15px;
            transition: background-color 0.3s;
        }

        .tab-button.active {
            background-color: #2B7DE1;
            color: white;
        }
        
        .form-container {
            background-color: white;
            margin: 16px;
            padding: 16px;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .form-group {
            margin-bottom: 16px;
        }

        .form-label {
            display: block;
            font-size: 15px;
            margin-bottom: 8px;
            color: #333;
        }

        .form-input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 15px;
            box-sizing: border-box;
        }

        .form-input:focus {
            border-color: #2B7DE1;
            outline: none;
        }

        textarea.form-input {
            min-height: 100px;
            resize: vertical;
        }

        .input-row {
            display: flex;
            gap: 10px;
        }

        .input-row .form-group {
            flex: 1;
        }

        .submit-button {
            background-color: #2B7DE1;
            color: white;
            border: none;
            padding: 14px 20px;
            border-radius: 6px;
            font-size: 16px;
            width: 100%;
            margin-top: 20px;
            cursor: pointer;
        }

        .submit-button:active {
            background-color: #236abd;
        }

        .message-box {
            background-color: #f8f8f8;
            border-left: 4px solid #2B7DE1;
            padding: 12px 16px;
            margin-bottom: 16px;
            font-size: 14px;
            color: #666;
        }

        .form-select {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 15px;
            background-color: white;
            appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 10px center;
            background-size: 16px;
        }
        
        .history-title {
            margin: 20px 16px 10px;
            font-size: 16px;
            color: #666;
        }
        
        .history-card {
            background-color: white;
            margin: 0 16px 10px;
            padding: 12px 16px;
            border-radius: 8px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.1);
        }
        
        .history-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
        }
        
        .history-type {
            font-size: 16px;
            font-weight: 500;
        }
        
        .history-status {
            padding: 2px 8px;
            font-size: 12px;
            border-radius: 10px;
        }
        
        .status-pending {
            background-color: #FFF3E0;
            color: #FF9500;
        }
        
        .status-approved {
            background-color: #E8F5E9;
            color: #34C759;
        }
        
        .status-rejected {
            background-color: #FFEBEE;
            color: #FF3B30;
        }
        
        .history-date {
            font-size: 13px;
            color: #999;
            margin-bottom: 8px;
        }
        
        .history-reason {
            font-size: 14px;
            color: #666;
        }
        
        .empty-tip {
            text-align: center;
            padding: 40px 0;
            color: #999;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 顶部状态栏 -->
        <div class="status-bar">
            <span class="time">10:25</span>
            <div class="status-icons">
                <span class="icon">📶</span>
                <span class="icon">📡</span>
                <span class="icon">🔋</span>
            </div>
        </div>
        
        <!-- 页面头部 -->
        <header class="page-header">
            <a href="profile.html" class="back-button">←</a>
            <div class="page-title">离职离岗申请</div>
        </header>
        
        <div class="page-content">
            <!-- 切换标签 -->
            <div class="tab-container">
                <div class="tab-button active" onclick="switchTab('leave')">请假申请</div>
                <div class="tab-button" onclick="switchTab('resign')">离职申请</div>
            </div>
            
            <!-- 表单区域 -->
            <div id="leave-form" class="form-container">
                <div class="message-box">
                    根据医院规定，请假需提前48小时申请，特殊情况除外。请假期间将影响您的工作排班和收入。
                </div>
                
                <div class="form-group">
                    <label class="form-label">请假类型</label>
                    <select class="form-select">
                        <option value="">请选择请假类型</option>
                        <option value="sick">病假</option>
                        <option value="personal">事假</option>
                        <option value="annual">年假</option>
                        <option value="other">其他</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label class="form-label">请假时间</label>
                    <div class="input-row">
                        <div class="form-group">
                            <input type="datetime-local" class="form-input" placeholder="开始时间">
                        </div>
                        <div class="form-group">
                            <input type="datetime-local" class="form-input" placeholder="结束时间">
                        </div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label class="form-label">请假原因</label>
                    <textarea class="form-input" placeholder="请简要说明请假原因（100字以内）"></textarea>
                </div>
                
                <div class="form-group">
                    <label class="form-label">证明材料（选填）</label>
                    <input type="file" id="leaveDocument" style="display:none">
                    <button class="form-input" onclick="document.getElementById('leaveDocument').click()" style="text-align:left; background-color:#f8f8f8; color:#666;">
                        点击上传证明材料（医院证明、请假条等）
                    </button>
                </div>
                
                <button class="submit-button" onclick="submitLeaveApplication()">提交申请</button>
            </div>
            
            <div id="resign-form" class="form-container" style="display: none;">
                <div class="message-box">
                    根据劳动合同，正式离职需提前30天书面申请，试用期内需提前3天申请。请谨慎填写离职申请。
                </div>
                
                <div class="form-group">
                    <label class="form-label">离职类型</label>
                    <select class="form-select">
                        <option value="">请选择离职类型</option>
                        <option value="personal">个人原因离职</option>
                        <option value="family">家庭原因离职</option>
                        <option value="health">健康原因离职</option>
                        <option value="other">其他原因</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label class="form-label">计划离职日期</label>
                    <input type="date" class="form-input">
                </div>
                
                <div class="form-group">
                    <label class="form-label">离职原因</label>
                    <textarea class="form-input" placeholder="请详细说明离职原因（200字以内）"></textarea>
                </div>
                
                <div class="form-group">
                    <label class="form-label">工作交接人</label>
                    <input type="text" class="form-input" placeholder="请填写交接人姓名">
                </div>
                
                <button class="submit-button" onclick="submitResignApplication()">提交申请</button>
            </div>
            
            <!-- 申请历史 -->
            <div class="history-title">申请历史</div>
            
            <div class="history-card">
                <div class="history-header">
                    <div class="history-type">病假</div>
                    <div class="history-status status-approved">已批准</div>
                </div>
                <div class="history-date">2023-10-15 08:00 至 2023-10-16 17:00</div>
                <div class="history-reason">发烧感冒，需要休息治疗。</div>
            </div>
            
            <div class="history-card">
                <div class="history-header">
                    <div class="history-type">事假</div>
                    <div class="history-status status-pending">审批中</div>
                </div>
                <div class="history-date">2023-11-05 00:00 至 2023-11-07 23:59</div>
                <div class="history-reason">家中有急事需要处理。</div>
            </div>
        </div>
        
        <!-- 底部导航栏 -->
        <nav class="bottom-nav">
            <a href="index.html" class="nav-item">
                <span class="nav-icon">🏠</span>
                <span>首页</span>
            </a>
            <a href="signin-center.html" class="nav-item">
                <span class="nav-icon">✓</span>
                <span>签到中心</span>
            </a>
            <a href="orders.html" class="nav-item">
                <span class="nav-icon">📋</span>
                <span>订单中心</span>
            </a>
            <a href="profile.html" class="nav-item active">
                <span class="nav-icon">👤</span>
                <span>我的</span>
            </a>
        </nav>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 更新顶部时间
            function updateTime() {
                const now = new Date();
                const hours = now.getHours().toString().padStart(2, '0');
                const minutes = now.getMinutes().toString().padStart(2, '0');
                document.querySelector('.time').textContent = `${hours}:${minutes}`;
            }
            
            updateTime();
            setInterval(updateTime, 60000);
        });
        
        // 切换表单
        function switchTab(formType) {
            const leaveTab = document.querySelector('.tab-button:first-child');
            const resignTab = document.querySelector('.tab-button:last-child');
            const leaveForm = document.getElementById('leave-form');
            const resignForm = document.getElementById('resign-form');
            
            if (formType === 'leave') {
                leaveTab.classList.add('active');
                resignTab.classList.remove('active');
                leaveForm.style.display = 'block';
                resignForm.style.display = 'none';
            } else {
                leaveTab.classList.remove('active');
                resignTab.classList.add('active');
                leaveForm.style.display = 'none';
                resignForm.style.display = 'block';
            }
        }
        
        // 提交请假申请
        function submitLeaveApplication() {
            // 简单表单验证
            const leaveType = document.querySelector('#leave-form .form-select').value;
            if (!leaveType) {
                showToast('请选择请假类型');
                return;
            }
            
            const dateInputs = document.querySelectorAll('#leave-form input[type="datetime-local"]');
            if (!dateInputs[0].value || !dateInputs[1].value) {
                showToast('请选择请假时间');
                return;
            }
            
            const reason = document.querySelector('#leave-form textarea').value;
            if (!reason) {
                showToast('请填写请假原因');
                return;
            }
            
            // 提交表单
            showToast('正在提交请假申请...');
            setTimeout(() => {
                showToast('申请提交成功！');
                // 可以在这里添加刷新页面或其他操作
                setTimeout(() => {
                    location.reload();
                }, 1500);
            }, 1500);
        }
        
        // 提交离职申请
        function submitResignApplication() {
            // 简单表单验证
            const resignType = document.querySelector('#resign-form .form-select').value;
            if (!resignType) {
                showToast('请选择离职类型');
                return;
            }
            
            const dateInput = document.querySelector('#resign-form input[type="date"]');
            if (!dateInput.value) {
                showToast('请选择计划离职日期');
                return;
            }
            
            const reason = document.querySelector('#resign-form textarea').value;
            if (!reason) {
                showToast('请填写离职原因');
                return;
            }
            
            const handover = document.querySelector('#resign-form input[type="text"]').value;
            if (!handover) {
                showToast('请填写工作交接人');
                return;
            }
            
            // 提交表单
            // 弹出确认对话框
            if (confirm('离职申请提交后将无法撤销，确认提交吗？')) {
                showToast('正在提交离职申请...');
                setTimeout(() => {
                    showToast('申请提交成功！');
                    // 可以在这里添加刷新页面或其他操作
                    setTimeout(() => {
                        location.reload();
                    }, 1500);
                }, 1500);
            }
        }
        
        // 轻提示
        function showToast(message) {
            // 检查是否已有toast
            let toast = document.querySelector('.toast');
            if (toast) {
                toast.remove();
            }
            
            // 创建新的toast
            toast = document.createElement('div');
            toast.className = 'toast';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            // 样式
            toast.style.position = 'fixed';
            toast.style.left = '50%';
            toast.style.bottom = '10%';
            toast.style.transform = 'translateX(-50%)';
            toast.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
            toast.style.color = 'white';
            toast.style.padding = '10px 20px';
            toast.style.borderRadius = '20px';
            toast.style.fontSize = '14px';
            toast.style.zIndex = '9999';
            toast.style.opacity = '0';
            toast.style.transition = 'opacity 0.3s';
            
            // 显示和自动隐藏
            setTimeout(() => {
                toast.style.opacity = '1';
            }, 10);
            
            setTimeout(() => {
                toast.style.opacity = '0';
                setTimeout(() => {
                    toast.remove();
                }, 300);
            }, 2000);
        }
    </script>
</body>
</html> 